<template>
  <div class="search">
    <van-search
      v-model="inputValue"
      show-action
      shape="round"
      background="#4e96f3"
      placeholder="请输入搜索关键词"
      @input="inputClick"
      @search="search"
      @clear="clear"
    >
      <template #action>
        <div @click="cancelClick" class="cancel"></div>
      </template>
    </van-search>
    <div class="content">
      <div class="item " v-if="showHistory">
        <div class="search-history">搜索历史</div>
        <div class="iconfont f20" @click="removeHistory">&#xe607;</div>
      </div>
      <van-cell
        v-show="showHistory"
        v-for="(item, index) in historyList"
        :key="index"
      >
        <template #title>
          <div @click="searchClick(item)">
            {{ item }}
          </div>
        </template>
        <template #icon>
          <i class="iconfont m5">&#xe647;</i>
        </template>
        <template #right-icon>
          <div class="iconfont" @click="removeSearchHistory(index)">
            &#xe605;
          </div>
        </template>
      </van-cell>
      <van-cell v-for="(item, index) in searchList" :key="index">
        <template #icon>
          <i class="iconfont m5">&#xe647;</i>
        </template>
        <!-- 搜索内容高亮，不区分大小写 -->
        <template #title>
          <div
            v-html="
              item.replace(
                new RegExp(inputValue, 'ig'),
                val => `<span style='color:red'>${val}</span>`
              )
            "
          />
        </template>
      </van-cell>
    </div>
  </div>
</template>

<script>
import { suggestion } from '@/api/search.js'
import { setLocal, getLocal, removeLocal } from '@/utils/local.js'
export default {
  name: 'search',
  data () {
    return {
      inputValue: '',
      page: '5', // 页码数量
      searchList: [], // 搜索结果
      showHistory: true,
      historyList: []
    }
  },
  created () {
    if (getLocal('history')) {
      this.historyList = JSON.parse(getLocal('history'))
    }
    // document.title = this.$route.meta.title
  },
  methods: {
    // 输入框变化事件
    async inputClick () {
      this.showHistory = false
      if (this.inputValue.trim()) {
        const res = await suggestion({
          q: this.inputValue
          // per_page: this.page
        })
        // console.log(res)
        this.searchList = res.data.options
      } else {
        this.searchList = []
        this.showHistory = true
      }
    },

    // 输入框事件
    search () {
      this.inputClick()
      if (this.inputValue.trim()) {
        if (this.historyList.indexOf(this.inputValue) === -1) {
          this.historyList.push(this.inputValue)
          setLocal('history', JSON.stringify(this.historyList))
        }
        this.$router.push('/home/searchresult?q=' + this.inputValue)
      } else {
        this.searchList = []
        this.showHistory = true
      }
    },
    // 搜索历史点击
    searchClick (item) {
      this.inputValue = item
      this.$router.push('/home/searchresult?q=' + item)
      this.inputValue = ''
    },
    // 取消
    cancelClick () {
      this.inputValue = ''
      this.searchList = []
      this.showHistory = true
    },
    clear () {
      this.cancelClick()
    },
    // 删除历史记录
    removeHistory () {
      this.$dialog
        .confirm({
          title: '温馨提示',
          message: '您确认要删除所有历史吗'
        })
        .then(() => {
          removeLocal('history')
          this.historyList = []
        })
        .catch(() => {})
    },
    // 单个历史记录清除
    removeSearchHistory (index) {
      const localArr = JSON.parse(getLocal('history'))
      localArr.splice(index, 1)
      setLocal('history', JSON.stringify(localArr))
      this.historyList = JSON.parse(getLocal('history'))
      if (getLocal('history') === '[]') {
        removeLocal('history')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.search {
  .van-search__action {
    color: #fff;
    background-color: #5e96ec;
  }
  .iconfont {
    color: #c9c9c9;
  }
  .m5 {
    margin-right: 5px;
  }
  .content {
    padding: 7px @p15;

    .item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 5px;
      .search-history {
        font-family: MicrosoftYaHei;
        font-size: 16px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 18px;
        letter-spacing: 1px;
        color: #333333;
      }
      .f20 {
        font-size: 20px;
        color: #999;
      }
    }
    .van-cell {
      padding-left: 0;
      padding-right: 0;
    }
  }
}
</style>
